<template>

  <el-tabs v-model="activeName" @tab-click="handleClick" class="tabcontent">
    <el-tab-pane label="我接入的" name="first">
        <!-- 顶部搜索 -->
        <topsearch @searchkey="searchkey"></topsearch>
        <jointable v-if="isData" @changepageTotal='joinchangepageTotal' @changepage='joinchangepage' :tabData='tableData' @refreshtable='refreshtable'></jointable>
    </el-tab-pane>
    <el-tab-pane label="接入我的" name="second">
      <!-- 顶部搜索 -->
        <topsearch></topsearch>
        <myjointable @changepageTotal='mychangepageTotal' @changepage='mychangepage' v-if="isData" :tabData='tableData' @openconfig='openconfig' @refreshtable='myrefreshtable'></myjointable>
        <configdialog :ids='ids' :isshowDailog='isshowconfig' @closetextDialog='closetextDialog' @confirmbtn='confirmbtn'></configdialog>
    </el-tab-pane>
	<el-tab-pane label="规则配置" name="third">
	    <rulepage></rulepage>
	</el-tab-pane>
  </el-tabs>
</template>

<script>
  // 顶部搜索
  import topsearch from '@/components/topsearch/topsearch'
//引入表格
import jointable from './jointable'
//我加入的
import myjointable from './myjointable'
//我加入的
import rulepage from '../../rulepage'
//api
import {getList} from '@/api/platform'
//配置弹窗
import configdialog from './configdialog'

export default {
  data() {
    return {
      //是否显示配置弹窗
      isshowconfig:false,
      //数据是否加载成功
      isData:false,
      //tabs 选项
      activeName: 'first',
      //页数
      page:1,
      //多少页
      total:10,
      //总共有多少条数据
      pageTotal:'',
      //列表数据
      tableData:{},
      //关联id
      ids:0,
      keyword:''
    }
  },
  methods: {
    // 我接入的 10 20
    joinchangepageTotal(val){
      this.total = val
      this.getListData(1)
    },
    //我接入的翻页
    joinchangepage(val){
      this.page = val
     this.getListData(1)
    },
    //接入我的翻页
    mychangepageTotal(val){
      this.total = val
      this.getListData(2)
    },
    //接入我的翻页页码
    mychangepage(val){
     this.page = val
     this.getListData(2)
    },
    searchkey(val){
      console.log(val)
      this.keyword=val.field108
      if(this.currentindex=='0'){
        this.getListData(1)

      }else{
         this.getListData(2)
      }
    },
    //刷新列表我的
    myrefreshtable(val){
      this.getListData(val)
    },
    //打开配置弹窗
    openconfig(id){
      this.ids = id
      this.isshowconfig = true
    },
    //关闭配置弹窗
    closetextDialog(){
       this.isshowconfig = false
    },
    //确定弹窗
    confirmbtn(){
       this.isshowconfig = false
       this.getListData(2)
    },
    //刷新列表
    refreshtable(val){
      this.getListData(val)
    },
    //切换tabs
    handleClick(tab, event) {
      this.isData = false
      this.currentindex=tab.index
      if(tab.index=='0'){//我接入的
     this.getListData(1)
      }else{//接入我的
        this.getListData(2)
      }
    },
    //获取列表数据
    async getListData(type){
      let params = {
        page:this.page,
        rows:this.total,
        pageType:type
      }
      if( this.keyword){
         params.keyword = this.keyword
      }
      let data = await getList(params)
      if(data.code=='0000'){
        this.tableData = data.data
        //列表总的数量
      this.pageTotal = data.data.page.total
      this.isData = true
      }

    }
  },
  components:{
      jointable,
      myjointable,
      configdialog,
      rulepage,
      topsearch
  },
  mounted(){
    //获取我接入的数据
    this.getListData(1)
  }
}
</script>

<style scoped lang='scss'>
::v-deep {
  .el-tabs__nav-wrap::after {
    height: 1px;
  }
  .el-tabs__item{
      font-size: 16px;
  }
  .el-tabs__item.is-active{
      font-weight: bold;
  }
}
.tabcontent{
    margin-top: 10px;
}
</style>
